<template>
	<view class="bg">
		<up-toast ref="uToastRef"></up-toast>
		<view class="centeredBox">
			<view class="title">
				登录
			</view>
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<up-form labelPosition="left" :model="state" :rules="state.rules" ref="form1">
				<up-form-item label="账号" prop="model1.userInfo.username" borderBottom ref="item1">
					<up-input v-model="state.model1.userInfo.username" autoBlur border="none"></up-input>
				</up-form-item>
				<up-form-item label="密码" prop="model1.userInfo.password" borderBottom ref="item1">
					<up-input v-model="state.model1.userInfo.password" password autoBlur border="none"></up-input>
				</up-form-item>
			</up-form>
			<up-button @click="submit" type='primary'>登录</up-button>
		</view>
	</view>

</template>
<script setup>
	import {
		getlogin
	} from "../../api/login.js"
	import {
		ref,
		reactive
	} from 'vue';

	// 使用 reactive 创建响应式状态  
	const state = reactive({
		model1: {
			userInfo: {
				username: 'admin',
				password: 'LEI19980823',
			},
		},
		rules: {
			'model1.userInfo.username': {
				type: 'string',
				required: true,
				message: '请输入账号',
				trigger: ['blur', 'change'],
			},
			'model1.userInfo.password': {
				type: 'string',
				required: true,
				message: '请输入密码',
				trigger: ['blur', 'change'],
			},
		},
		
	});
	// 表单引用  
	const form1 = ref(null);  
	const uToastRef = ref(null)
	// 提交方法  
	function submit() {  
	  form1.value.validate().then(async valid => { 
		  console.log(valid);
	    if (valid) {  
	      
		  let res = await getlogin(state.model1.userInfo)
		  if (res.data.status == 200) {
		  	  uToastRef.value.show({  
		  	     type:"success",
				 message:"登录成功"
		  	  });
			  uni.setStorageSync('token',res.data.result.token);
			  uni.navigateTo({
			  	url: '/pages/home/home'
			  });
		  }
		  if (res.data.status == 400) {
		  	uToastRef.value.show({
				type:"error",
		  		message:"账号或密码错误"
		  	});
		  }
	    } else {  
	      uni.$u.toast('校验失败')
	    }  
	  }).catch(() => {  
	    // 处理验证错误  
	    uni.$u.toast('校验失败')
	  });  
	}  
</script>
<style scoped lang="scss">
	.bg{
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		.centeredBox{
			width: 500rpx;
			height: 500rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.title{
				margin-bottom: 100rpx;
				font-size: 60rpx;
				font-weight: 900;
			}
		}
	}
	
</style>